<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <!--适配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Sexbox Register</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div class="register">
        <h1>Welcome Sexbox</h1>
        <form method="post">
            <input type="text" name="username" placeholder="Username" required="required" />
            <input id="password" type="password" name="password" placeholder="Password" required="required" />
            <input id="password_again" type="password" name="password_again" placeholder="Password again" required="required" onkeyup="validate()" />
            <div id="password_tip"></div>
            <input type="text" name="nickname" placeholder="Nickname" />
            <input type="text" name="email" placeholder="Email" />
            <button type="submit" class="btn btn-primary btn-block btn-large">Let me in</button>
        </form>
    </div>
    <!--<script  src="js/index.js"></script>-->   
    <script>
    function validate() {
        var pwd1 = document.getElementById("password").value;
        var pwd2 = document.getElementById("password_again").value;
        if(pwd1 == pwd2) {
            document.getElementById("password_tip").innerHTML="";
            document.getElementById("password_tip").style = "";
            // document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("password_tip").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("password_tip").style = "margin-bottom: 10px;";
            // document.getElementById("submit").disabled = true;
        }
    }
  </script>
</body>

</html>
